<template>
    <div class="gjqy fhgc">
        <div class="fontGjqy">
            <span style="padding: 14px 0 0px 0">防护工程{{TableShow?"":`/${fhgcId?"编辑":"添加"}数据`}}</span>
        </div>
        <div class="redwTable" v-if="TableShow">
            <div class="buttonBox">
                <el-button
                        style="margin-right: 10px"
                        class="btnDefault"
                        @click="showGJQYSelect"
                >添加数据
                </el-button>
                <el-button class="btnDefault" @click="DelectSelectRow">批量删除</el-button>
            </div>
            <div class="right_one_body table">
                <el-table
                        :data="sliceData"
                        border
                        highlight-current-row
                        style="width: 100%"
                        @selection-change="selectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="gcmc" label="工程名称"></el-table-column>
                    <el-table-column prop="gcbh" label="工程编号"></el-table-column>
                    <el-table-column prop="gclxmc" label="工程类型"></el-table-column>
                    <!--<el-table-column prop="zhjglxmc" label="指挥机构类型"></el-table-column>-->
                    <el-table-column prop="jsdd" label="建设地点"></el-table-column>
                    <el-table-column prop="jd" label="经度"></el-table-column>
                    <el-table-column prop="wd" label="纬度"></el-table-column>
                    <el-table-column prop label="操作" width="120">
                        <template slot-scope="scope">
                         <span @click="editDmt(scope.row)" class="cursor">
                            <img src="../../assets/images/dmtIcon.png"/>
                          </span>
                            <span @click="editGjqy(scope.row)" class="ml10 mr10 cursor">
                            <img src="../../assets/image/sjlr/编辑_on.png"/>
                          </span>
                            <span
                                    @click.prevent="DelectRow(scope.row)"
                                    class="normalColor cursor"
                            >
                            <img src="../../assets/image/sjlr/删除_on.png" alt/>
                          </span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <pages :page="page" @changePage="changePage1"></pages>
                </div>
            </div>
        </div>
        <div class="gjqyDetailAdd" v-if="!TableShow">
            <el-form ref="form" :model="form" label-width="180px" style="height: 100%">
                <div class=" txsxstyle">
                    <span class="style_title">基本信息</span>
                    <div class="txsxstyle_box">
                        <div class="formBox">
                            <el-form-item
                                    v-for="(item, index) in form.jbsxArr"
                                    :label="item.sxmc"
                                    :key="index"
                                    :prop="'jbsxArr.' + index + '.sxvalue'"
                                    :rules="checkRules(item)"
                            >
                                <el-input
                                        class="noBg border1"
                                        v-show="item.sxlx == 0 || item.sxlx == 4 || item.sxlx == 5||item.sxlx == 8||item.sxlx == 9||item.sxlx == 10"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                ></el-input>
                                <el-select
                                        class="noBg border1"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        v-show="item.sxlx == 1"
                                        placeholder="请选择"
                                >
                                    <el-option
                                            v-for="option in item.selectOption"
                                            :key="option.zdID"
                                            :label="option.zdmc"
                                            :value="option.zdID"
                                    ></el-option>
                                </el-select>

                                <el-date-picker
                                        class="noBg border1"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        v-show="item.sxlx == 2"
                                        type="datetime"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        value-format="timestamp"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>

            <div class="textRight mt20">
                <el-button
                        class="btnDefault"
                        @click="submitGJQYSelect"
                >保存
                </el-button>
                <el-button
                        class="btnDefault"
                        @click="backList"
                >取消
                </el-button>
            </div>
        </div>
        <el-dialog title="防护工程多媒体信息" :visible.sync="dmtDialog" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="120px" class="dialogDmt">
                <el-form-item width="100%"
                              v-for="(item, index) in form.dmtArr"
                              :label="'图片'+(index+1)"
                              :key="index"
                              :prop="'dmtArr.' + index + '.wjljurl'"
                              :rules="[{ required: true, message: '必填字段', trigger: ['blur','change'] }]"
                >
                    <div class="flexMiddleCenter " style="width:400px">
                        <el-input :disabled="true"
                                  class="noBg border1"
                                  v-model="item.wjljurl"
                        ></el-input>
                        <upload :index="index"
                                @beforeUpload="beforeUploadPhoto(index)"
                                @delImgFromList="delImgFromList"
                                @uploadSuccess="uploadPhotoSuccess"
                                :type="'button'"></upload>
                        <i class="el-icon-circle-plus-outline font24 ml10" @click="addDmtArr" v-if="index==0"></i>
                        <i class="el-icon-remove-outline font24 ml10" @click="deleteDmtArr(index)" v-if="index>0"></i>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
                <el-button @click="saveDmtArr" class="btnDefault">保存</el-button>
                <el-button @click="dmtDialog=false" class="btnDefault">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import "../../assets/css/global.css";
  import pages from "../base/pages";
  import { baseServe } from "../../request/api";
  import upload from "../base/upload";

  export default {
    name: "fhgc",
    data() {
      return {
        form: {
          jbsxArr: [
            {
              "sxvalue": "",
              "sxID": "gcmc",
              "sxmc": "工程名称",
              "sxlx": "0",
              "description": null,
              "sxzd": "gcmc",
              "isbt": "1"
            },
            {
              "sxvalue": "",
              "sxID": "gcbh",
              "sxmc": "工程编号",
              "sxlx": "0",
              "description": null,
              "sxzd": "gcbh",
              "isbt": "1"
            },
            {
              "sxvalue": "",
              "sxID": "gclx",
              "sxmc": "工程类型",
              "sxlx": "1",
              "selectOption": [{ zdmc: "指挥工程", zdID: "10501" }, { zdmc: "物资储备库", zdID: "10502" }, {
                zdmc: "专业队工程",
                zdID: "10503"
              }, { zdmc: "人员掩蔽工程", zdID: "10504" }, { zdmc: "医疗救护工程", zdID: "10505" }, { zdmc: "其他", zdID: "10506" }],
              "description": null,
              "sxzd": "gclx",
              "isbt": "1"
            },
            {
              "sxvalue": "",
              "sxID": "gcjszt",
              "sxmc": "工程建设状态",
              "sxlx": "1",
              "selectOption": [{ zdmc: "正常", zdID: "10521" }, { zdmc: "在建", zdID: "10522" }, {
                zdmc: "维修",
                zdID: "10523"
              }, { zdmc: "废弃", zdID: "10524" }, { zdmc: "其它", zdID: "10525" }],
              "description": null,
              "sxzd": "gcjszt",
              "isbt": "0"
            },
            { "sxvalue": "", "sxID": "jd", "sxmc": "经度", "sxlx": "9", "description": null, "sxzd": "jd", "isbt": "1" },
            { "sxvalue": "", "sxID": "wd", "sxmc": "纬度", "sxlx": "10", "description": null, "sxzd": "wd", "isbt": "1" },
            {
              "sxvalue": "",
              "sxID": "kgsj",
              "sxmc": "开工时间",
              "sxlx": "2",
              "description": null,
              "sxzd": "kgsj",
              "isbt": "1"
            },
            {
              "sxvalue": "",
              "sxID": "jgsj",
              "sxmc": "竣工时间",
              "sxlx": "2",
              "description": null,
              "sxzd": "jgsj",
              "isbt": "1"
            },
            {
              "sxvalue": "",
              "sxID": "jsdd",
              "sxmc": "建设地点",
              "sxlx": "0",
              "description": null,
              "sxzd": "jsdd",
              "isbt": "0"
            },

            {
              "sxvalue": "",
              "sxID": "jzmj",
              "sxmc": "建筑面积",
              "sxlx": "0",
              "description": null,
              "sxzd": "jzmj",
              "isbt": "0"
            },
            {
              "sxvalue": "",
              "sxID": "symj",
              "sxmc": "使用面积",
              "sxlx": "0",
              "description": null,
              "sxzd": "symj",
              "isbt": "0"
            },
            { "sxvalue": "", "sxID": "yt", "sxmc": "用途", "sxlx": "0", "description": null, "sxzd": "yt", "isbt": "0" },
            {
              "sxvalue": "",
              "sxID": "fzr",
              "sxmc": "负责人",
              "sxlx": "0",
              "description": null,
              "sxzd": "fzr",
              "isbt": "0"
            },
            {
              "sxvalue": "",
              "sxID": "fzrdh",
              "sxmc": "负责人电话",
              "sxlx": "8",
              "description": null,
              "sxzd": "fzrdh",
              "isbt": "0"
            },
            {
              "sxvalue": "",
              "sxID": "krnrs",
              "sxmc": "可容纳人数",
              "sxlx": "0",
              "description": null,
              "sxzd": "krnrs",
              "isbt": "0"
            },
            {
              "sxvalue": "",
              "sxID": "xrnrs",
              "sxmc": "现容纳人数",
              "sxlx": "0",
              "description": null,
              "sxzd": "xrnrs",
              "isbt": "0"
            },
            {
              "sxvalue": "",
              "sxID": "krnrj",
              "sxmc": "可容纳容积",
              "sxlx": "0",
              "description": null,
              "sxzd": "krnrj",
              "isbt": "0"
            },
            {
              "sxvalue": "",
              "sxID": "xrnrj",
              "sxmc": "现容纳容积",
              "sxlx": "0",
              "description": null,
              "sxzd": "xrnrj",
              "isbt": "0"
            },

            { "sxvalue": "", "sxID": "bz", "sxmc": "备注", "sxlx": "0", "description": null, "sxzd": "bz", "isbt": "0" }
          ],
          dmtArr: [
            {
              "dmtid": "",
              "dmtlx": "fhgc",
              "sjid": "",
              "bt": "标题",
              "zz": "",
              "wjm": "文件名",
              "wjlx": "png",
              "wjljurl": ""
            }
          ]
        },
        TableShow: true,
        page: {
          //总条数
          total: 0,
          //每页条数
          limit: 10,
          //当前页数
          currentPage: 1,
          pageSizes: [5, 10]
        },
        tableData: [],
        sliceData: [],
        selectRowArr: [],
        dmtDialog: false
      };
    },
    mounted() {
      this.getTableByType();
    },
    computed: {
      zyjjmbId() {
        return this.$store.state.zyjjmbId;
      },
      fhgcId() {
        return this.$store.state.detailTypeId;
      }
    },
    methods: {
      saveDmtArr() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let dmtModels = this.form.dmtArr;
            dmtModels.map(v => {
              v.sjid = this.fhgcId;
            });
            baseServe.updatedmt({ dmtModels: dmtModels }).then(() => {
              this.getTableByType();
              this.TableShow = true;
              this.dmtDialog = false;
              this.$message({ type: "success", message: "保存成功" });
            });
          } else {
            this.$message({ type: "warning", message: "请按照规则填写选项" });
            return false;
          }
        });
      },
      addDmtArr() {
        this.form.dmtArr.push({
          "dmtid": "",
          "dmtlx": "fhgc",
          "sjid": "",
          "bt": "标题",
          "zz": "",
          "wjm": "文件名",
          "wjlx": "png",
          "wjljurl": ""
        });
      },
      deleteDmtArr(index) {
        this.form.dmtArr.splice(index, 1);
      },
      beforeUploadPhoto(index) {
        this.photoIndex = index;
      },
      uploadPhotoSuccess(data) {
        this.form.dmtArr[this.photoIndex].wjljurl = data.fileDownloadPath;
      },
      delImgFromList(index) {
        this.photoIndex = index;
        this.form.dmtArr[this.photoIndex].wjljurl = "";
      },
      editDmt(row) {
        baseServe.cxdmtByType({
          dmtLx: "fhgc",
          sjID: row.fhgcid
        }).then(res => {
          if (res.data.dmtModels && res.data.dmtModels.length > 0) {
            this.form.dmtArr = res.data.dmtModels;
          }
          this.$store.state.detailTypeId = row.fhgcid;
          this.dmtDialog = true;
        });
      },
      DelectRow(row) {
        this.$confirm("此操作将删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseServe.deletefhgc({ fhgcID: row.fhgcid }).then(() => {
              this.getTableByType();
              this.$message({ type: "success", message: "删除成功" });
            });
          });
      },
      DelectSelectRow() {
        let arr = [];
        for (let i = 0; i < this.selectRowArr.length; i++) {
          let target = this.selectRowArr[i].fhgcid;
          arr.push(target);
        }
        if(arr.length==0){
          this.$message({ type: "warning", message: "请先勾选需要删除的数据" });
          return
        }
        this.$confirm("此操作将批量删除选择项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            baseServe.deletefhgc({ fhgcID: arr.join(",") }).then(() => {
              this.getTableByType();
              this.$message({ type: "success", message: "删除成功" });
            });
          });
      },
      selectionChange(val) {
        this.selectRowArr = val;
      },
      //判断校验规则
      checkRules(item) {
        let arr = [];
        if (item.isbt == "1") {
          arr.push({ required: true, message: "必填字段", trigger: "blur" });
        }
        if (item.sxlx == 4) {
          arr.push({ validator: this.checkNum, trigger: "blur" });
        }
        if (item.sxlx == 5) {
          arr.push({ validator: this.checkNumber, trigger: "blur" });
        }
        if (item.sxlx == 8) {
          arr.push({ validator: this.checkMobile, trigger: "blur" });
        }
        if (item.sxlx == 9) {
          arr.push({ validator: this.checkJD, trigger: "blur" });
        }
        if (item.sxlx == 10) {
          arr.push({ validator: this.checkWD, trigger: "blur" });
        }
        return arr;
      },
      getGjqysxValue() {
        baseServe.searchOneInfo({
          queryType: "fhgc",
          lxId: this.fhgcId
        }).then(res => {
          if (res.data.fhgcModel) {
            let jbsxArrClone = this.form.jbsxArr;
            jbsxArrClone.map((v) => {
              for (let k in res.data.fhgcModel) {
                if (k == v.sxzd) {
                  v.sxvalue = res.data.fhgcModel[k];
                  if (v.sxlx == 2 && v.sxvalue) {
                    v.sxvalue = new Date(v.sxvalue).getTime();
                  }
                }
              }
            });
          }
        });
      },
      //提交
      submitGJQYSelect() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let params = {};
            this.form.jbsxArr.map(v => {
              if (v.sxzd) {
                params[v.sxzd] = v.sxvalue;
              }
            });
            params.zyjjmbid = this.zyjjmbId;
            if (this.fhgcId) {
              params.fhgcid = this.fhgcId;
            }
            baseServe.updatefhgc(params).then(() => {
              this.getTableByType();
              this.showGJQYSelect();
              this.TableShow = true;
              this.$message({ type: "success", message: "保存成功" });
            });
          } else {
            this.$message({ type: "warning", message: "请按照规则填写选项" });
            return false;
          }
        });

      },
      //返回
      backList() {

        this.showGJQYSelect();
        this.TableShow = true;
      },
      //新增
      showGJQYSelect() {
        this.$store.state.detailTypeId = "";
        this.form.jbsxArr = [
          {
            "sxvalue": "",
            "sxID": "gcmc",
            "sxmc": "工程名称",
            "sxlx": "0",
            "description": null,
            "sxzd": "gcmc",
            "isbt": "1"
          },
          {
            "sxvalue": "",
            "sxID": "gcbh",
            "sxmc": "工程编号",
            "sxlx": "0",
            "description": null,
            "sxzd": "gcbh",
            "isbt": "1"
          },
          {
            "sxvalue": "",
            "sxID": "gclx",
            "sxmc": "工程类型",
            "sxlx": "1",
            "selectOption": [{ zdmc: "指挥工程", zdID: "10501" }, { zdmc: "物资储备库", zdID: "10502" }, {
              zdmc: "专业队工程",
              zdID: "10503"
            }, { zdmc: "人员掩蔽工程", zdID: "10504" }, { zdmc: "医疗救护工程", zdID: "10505" }, { zdmc: "其他", zdID: "10506" }],
            "description": null,
            "sxzd": "gclx",
            "isbt": "1"
          },
          {
            "sxvalue": "",
            "sxID": "gcjszt",
            "sxmc": "工程建设状态",
            "sxlx": "1",
            "selectOption": [{ zdmc: "正常", zdID: "10521" }, { zdmc: "在建", zdID: "10522" }, {
              zdmc: "维修",
              zdID: "10523"
            }, { zdmc: "废弃", zdID: "10524" }, { zdmc: "其它", zdID: "10525" }],
            "description": null,
            "sxzd": "gcjszt",
            "isbt": "0"
          },
          // {
          //   "sxvalue": "",
          //   "sxID": "zhjglx",
          //   "sxmc": "指挥机构类型",
          //   "sxlx": "1",
          //   "selectOption": [{ zdmc: "基本指挥所", zdID: "10511" }, { zdmc: "预备指挥所", zdID: "10512" }, {
          //     zdmc: "简易指挥所",
          //     zdID: "10513"
          //   }, { zdmc: "地面指挥中心", zdID: "10514" }],
          //   "description": null,
          //   "sxzd": "zhjglx",
          //   "isbt": "1"
          // },
          { "sxvalue": "", "sxID": "jd", "sxmc": "经度", "sxlx": "9", "description": null, "sxzd": "jd", "isbt": "1" },
          { "sxvalue": "", "sxID": "wd", "sxmc": "纬度", "sxlx": "10", "description": null, "sxzd": "wd", "isbt": "1" },
          {
            "sxvalue": "",
            "sxID": "kgsj",
            "sxmc": "开工时间",
            "sxlx": "2",
            "description": null,
            "sxzd": "kgsj",
            "isbt": "1"
          },
          {
            "sxvalue": "",
            "sxID": "jgsj",
            "sxmc": "竣工时间",
            "sxlx": "2",
            "description": null,
            "sxzd": "jgsj",
            "isbt": "1"
          },
          {
            "sxvalue": "",
            "sxID": "jzmj",
            "sxmc": "建筑面积",
            "sxlx": "0",
            "description": null,
            "sxzd": "jzmj",
            "isbt": "0"
          },
          {
            "sxvalue": "",
            "sxID": "symj",
            "sxmc": "使用面积",
            "sxlx": "0",
            "description": null,
            "sxzd": "symj",
            "isbt": "0"
          },
          { "sxvalue": "", "sxID": "yt", "sxmc": "用途", "sxlx": "0", "description": null, "sxzd": "yt", "isbt": "0" },
          {
            "sxvalue": "",
            "sxID": "fzr",
            "sxmc": "负责人",
            "sxlx": "0",
            "description": null,
            "sxzd": "fzr",
            "isbt": "0"
          },
          {
            "sxvalue": "",
            "sxID": "fzrdh",
            "sxmc": "负责人电话",
            "sxlx": "8",
            "description": null,
            "sxzd": "fzrdh",
            "isbt": "0"
          },
          {
            "sxvalue": "",
            "sxID": "jsdd",
            "sxmc": "建设地点",
            "sxlx": "0",
            "description": null,
            "sxzd": "jsdd",
            "isbt": "0"
          },
          {
            "sxvalue": "",
            "sxID": "krnrs",
            "sxmc": "可容纳人数",
            "sxlx": "0",
            "description": null,
            "sxzd": "krnrs",
            "isbt": "0"
          },
          {
            "sxvalue": "",
            "sxID": "xrnrs",
            "sxmc": "现容纳人数",
            "sxlx": "0",
            "description": null,
            "sxzd": "xrnrs",
            "isbt": "0"
          },
          {
            "sxvalue": "",
            "sxID": "krnrj",
            "sxmc": "可容纳容积",
            "sxlx": "0",
            "description": null,
            "sxzd": "krnrj",
            "isbt": "0"
          },
          {
            "sxvalue": "",
            "sxID": "xrnrj",
            "sxmc": "现容纳容积",
            "sxlx": "0",
            "description": null,
            "sxzd": "xrnrj",
            "isbt": "0"
          },

          { "sxvalue": "", "sxID": "bz", "sxmc": "备注", "sxlx": "0", "description": null, "sxzd": "bz", "isbt": "0" }
        ],
          this.onlyOther = true;
        this.TableShow = false;
      },
      //编辑
      editGjqy(row) {
        this.$store.state.detailTypeId = row.fhgcid;
        if (this.fhgcId) {
          this.TableShow = false;
          this.getGjqysxValue();
        }
      },
      //获取表格
      getTableByType() {
        baseServe
          .getGjqyTable({
            queryType: "fhgc",
            zyjjmbId: this.zyjjmbId
          })
          .then(res => {
            if (res.data.fhgcInfos) {
              this.tableData = res.data.fhgcInfos;
              this.page.total = this.tableData.length;
              this.page.currentPage = 1;
              this.pages();
            }
          });
      },
      //前台分页
      pages() {
        this.page.total = this.tableData.length;
        if (!this.page.total % this.page.limit) {
          this.page.currentPage = this.page.currentPage - 1;
        }
        let begin = (this.page.currentPage - 1) * this.page.limit;
        let end = this.page.currentPage * this.page.limit;
        this.sliceData = this.tableData.slice(begin, end);
      },
      changePage1(data) {
        this.page = data;
        this.pages();
      }
    },
    components: {
      pages,
      upload
    }
  };
</script>

<style lang="less" scoped>
    @import "../../../src/assets/css/global.css";
    .fhgc .gjqyDetailAdd .txsxstyle {
        height: 100%;
    }
</style>
